

<template>
  <section class="todoapp">
    <!-- <TodoHeader></TodoHeader>
    <TodoMain
      :todoList="store.filterTodoList"
      :isAllDone="store.isAllDone"
    ></TodoMain>
    <TodoFooter
      :unDoneNumber="store.unDoneNumber"
      :todoList="store.filterTodoList"
    ></TodoFooter> -->

    <Demo v-if="isShow"></Demo>
    <hr />
    <button @click="isShow = false">销毁Demo组件</button>
  </section>
</template>

<script setup>
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";
import Demo from "./pages/Demo.vue";
import { watchEffect, ref } from "vue";
import useLocalStoage from "./hooks/useLocalStoage";

import useTodoStore from "./store/useTodoStore";
let store = useTodoStore();
let isShow = ref(true);

watchEffect(() => {
  store.$subscribe((mutations, state) => {
    useLocalStoage("todomvc", state.todoList);
  });
});
</script>

